大家好，來到 IT 鐵人賽最後一天了，終於要進入尾聲了！
今天我們要整合這三十天來所學到的知識量，來完成一個待辦事項小工具，這工具要做到以下幾個功能！

1. 可以記下代辦事情。
2. 能夠刪除代辦事情。
3. 網頁關掉再打開，代辦清單還在。

我也在思考這個程式碼有點長我該怎麼手把手地跟大家說每行程式碼都在做什麼呢？
所以我這邊先放上 待辦事項小工具完成品接著我會一個一個區塊大致上的解釋此區塊主要在做什麼，那就開始吧！

第一步 建立HTML結構

記得也要把 class 的名稱取好，在建立 DOM 元素會用到

<div class="card">
        <div class="title">
            <h1>待辦事項</h1>
        </div>

        <input type="text" class="note">
        <input type="button" class="add" value="記下來">
        <hr>
        <div class="list"></div>
</div> 

第二步 透過 CSS 裝飾畫面

這邊是 CSS 可以自己看要呈現什麼樣子就怎麼裝飾，我這邊是用陽春版的外觀。

body{
  min-height:100vh;
  display: flex;
  justify-content:center;
  align-items:center;
}

.card{
    margin: 0 auto;
    background-color: #ffffff;
    width: 250px;
    border: 2px solid #222;
    border-radius: 10px;
    text-align: center;
}

.title{
    background-color: rgb(15, 177, 251);
    color: #ffffff;
    height: 80px;
    overflow: hidden;
}

第三步 指定 DOM 元素

重點來囉！開始撰寫 JS 我們先把會點擊到的按鈕、要顯示的列表、還有資料都先用變數建立起來，這邊有一個 || []符號，意思是左邊如果沒有資料就代入 [] 空陣列。

var add = document.querySelector('.add');
var list = document.querySelector('.list');
var data = JSON.parse(localStorage.getItem('listData'))|| [];
// || []的意思是左邊如果沒有資料就代入 [] 空陣列

第四步 監聽與更新

在 DOM 元素上綁定監聽事件，並放上更新列表的函式，這樣當待辦事項有刪除或新增才可以即時更新列表。

//監聽事件與更新
add.addEventListener('click', newAdd);
list.addEventListener('click',toggleDone);
updateList(data)

第五步 撰寫新增事項函式

這邊就是把我們輸入的事項，添加到代辦事項的程式碼，每一行的用途也附上註解囉！
在第 9 行 localStorage.setItem 就是把資料轉成 stringigy 型態存在瀏覽器資料庫內，達成即便關掉網頁下次再打開，待辦事項還是存在！

 function newAdd(e){
     e.preventDefault();  //取消預設屬性
     var txt = document.querySelector('.note').value;  //去抓輸入框的數值
     var todo ={       
         content: txt
     };
     data.push(todo);   // 在 data 內放進上面的資料
     updateList(data);  //更新 list 列表
     localStorage.setItem('listData',JSON.stringify(data));  // 在瀏覽器資料庫設定一個叫做 listData 的儲存格 裡面放data 資料

第六步 撰寫刪除事項函式

此步驟運用了再上一篇提到的 splice 的方式，在點擊元素後就刪除那個元素，並且加入 if 判斷式只有點擊 Ａ標籤才會有反應，一樣要寫第 6 行的 localStorage.setItem 把刪除後的陣列資料再次寫進資料庫內，保證瀏覽器內的資料庫是處在最新的狀態，也就是每次的更新或刪除都必須在更新 localStorage 內的陣列資料。

function toggleDone(e){
    e.preventDefault();  //取消預設屬性
    if( e.target.tagName !== 'A'){return};   //去判斷如果抓到的值不等於Ａ這個標籤就返回不做任何動作
    var index = e.target.dataset.index;    //建立一個變數，去抓取這個點擊按鈕的 dataset 
    data.splice(index,1);   //在資料中把這個事件刪除
    localStorage.setItem('listData',JSON.stringify(data));  //刪除後必須在進到瀏覽器去設定新的資料，找到 listData 這個記憶體欄位 放進新的資料。
    updateList(data);  //我們在更新整個畫面的列表。
}

第七步 撰寫更新畫面函式

最後因為畫面不斷的被新增與刪除，所以要寫一個更新畫面的函式，好讓畫面隨時處在更新後的狀態：

// 更新畫面
function updateList(items){ // items 是自己取名的參數
     str = '' ; 
     var len = items.length;  //去抓全部列表的資料
     for(var i=0;i<len;i++){  //使用迴圈把所有抓到得值加上標籤塞進去列表內
        str += '<li><a href="#" data-index='+i+'>刪除</a><span>'+ items[i].content+'</span></li>';
     }
     list.innerHTML = str;
}

到這邊我們就完成了一個簡易的待辦事項小工具囉，30天的 JS 系列文也到這邊完結篇囉！

文末心得

第一次參加IT鐵人賽，每天都在想要怎麼解釋我對 JS 每個語法的理解才比較讓大家好懂，並要安排怎麼講才可以講到最後能帶大家完成代辦清單這個小工具的章節，整個系列文可能有很多地方文筆不通順或講解的不夠好的地方，就還請各位前輩多多給予建言囉！

但無論如何我也總算完成了 溫故知新 javaScript 系列文了，除了希望可以把所學到的東西分享出去之外，最重要的事也幫自已溫故知新 JS，鐵人賽只是一個階段的結束在程式這條路還有很長的路要走期許自己在未來學到更多知識，能在用更好的文筆與文章脈絡跟大家分享，謝謝所有觀看過文章的您！

AWEI